<template>
    <div>
        <el-form style="margin-top: 20px" size="mini" :inline="true" :model="searchParam" class="demo-form-inline">
            <el-form-item label="搜索关键词">
                <el-input v-model="searchParam.keyword" placeholder="寻主标题或发布地址"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="toQuery">查询</el-button>
                <el-button type="danger" @click="batchDel">批量删除</el-button>
            </el-form-item>
        </el-form>
        <el-table
                border
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="resources"
                    label="图片"
                    width="120">
                <template slot-scope="scope">
                    <el-image :src="scope.row.resourcesUrl"></el-image>
                </template>
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="宠物名称">
            </el-table-column>
            <el-table-column
                    prop="age"
                    label="年龄">
            </el-table-column>
            <el-table-column
                    prop="gender"
                    label="性别">
                <!-- 如果需要对表中某个字段进行显示内容的切换，则可以使用<template>语法进行转换 -->
                <!-- 分析：如果是0正常；如果是1：禁用-->
                <template slot-scope="scope">
                    <el-tag size="mini" v-if="scope.row.gender == 0" type="success">公</el-tag>
                    <el-tag size="mini" v-if="scope.row.gender == 1" type="danger">母</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
            <el-table-column
                    prop="state"
                    label="审核状态">
                <template slot-scope="scope">
                    <el-tag size="mini" v-if="scope.row.state == 0" type="success">正常</el-tag>
                    <el-tag size="mini" v-if="scope.row.state == 1" type="danger">禁用</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="shenghe(scope.$index, scope.row)">寻主审核</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination style="margin-top: 20px"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="searchParam.currPage"
                       :page-sizes="[1, 2, 3, 4]"
                       :page-size="searchParam.pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                options: [],
                form: {},//这个对象用于保存表单提交时的数据
                dialogFormVisible: false,
                searchParam: {
                    currPage: 1,
                    pageSize: 3
                },
                total: 0,
                tableData: [],
                multiIdSelcts: [] // 用于保存复选框选中的值
            }
        },
        methods: {
            handleSizeChange(val) {
                this.searchParam.pageSize = val;
                this.toQuery();
            },
            handleCurrentChange(val) {
                this.searchParam.currPage = val;
                this.toQuery();
            },
            handleSelectionChange(val) {//复选框值发生变化时，会触发当前方法
                console.log(">>>>>val=" + JSON.stringify(val))
                this.multiIdSelcts = val;
            },
            toQuery() {//查询方法
                this.$http.post('/searchmaster/findpage', this.searchParam).then(res => {
                    this.tableData = res.data.rows;
                    this.total = res.data.total;
                })
            },
            shenghe(){

            }
        },
        mounted() {
            this.toQuery();
        }


    }
</script>
